<template>
	<view class="fortune-container">
		<public-module :title="title" />

		<view class="fortune-content">
			<view class="question-section" v-if="!showResult">
				<view class="question-type">
					<radio-group @change="onQuestionTypeChange" class="radio-group">
						<label v-for="(type, index) in questionTypes" :key="index" class="radio-label">
							<radio :value="type.value" :checked="type.value === selectedType" color="#ff4444" />
							<text>{{type.label}}</text>
						</label>
					</radio-group>
				</view>

				<view class="question-input">
					<text class="input-label">请输入您想问的具体事项：</text>
					<input class="input-field" v-model="questionText" placeholder="例如：我能考上吗？或者今天我有桃花运吗？" type="text" />
				</view>
				<button class="cast-button" @click="castDivination" :disabled="!questionText.trim()">开始算卦</button>
			</view>

			<view v-if="showResult" class="result-section">
				<view class="hexagram-info">
					<view class="hexagram-name">{{ currentHexagram.name }}</view>
					<view class="hexagram-symbol">{{ currentHexagram.symbol }}</view>
					<view class="hexagram-meaning">{{ currentHexagram.meaning }}</view>
					<view class="hexagram">
						<view v-for="(line, index) in hexagramLines" :key="index" class="yao-line"
							:class="[line ? 'yang' : 'yin', {'changing': changingLines.includes(5-index)}]">
						</view>
					</view>
				</view>

				<view class="interpretation">
					<view class="section">
						<view class="section-title">{{ selectedType === 'study' ? '学业分析' : '姻缘分析' }}</view>
						<view class="section-content">
							<text>{{ selectedType === 'study' ? currentHexagram.details.study : currentHexagram.details.love }}</text>
						</view>
					</view>

					<view class="advice" v-if="changingLines.length">
						<view class="section-title">{{ selectedType === 'study' ? '学业变化提示' : '姻缘变化提示' }}</view>
						<view v-for="line in changingLines" :key="line" class="changing-line">
							第{{6-line}}爻变：{{ getChangingLineInterpretation(line) }}
						</view>
					</view>
				</view>

				<button class="cast-button retry" @click="resetDivination">好运来</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		hexagramData,
		trigrams,
		changingLineInterpretations
	} from '@/static/data/hexagrams.js'

	export default {
		data() {
			return {
				title: '今日运势',
					questionText: '', // 新增问卦内容
					showResult: false,
					hexagramLines: [],
					changingLines: [],
					currentHexagram: null,
					selectedType: 'study',
					questionTypes: [{
							label: '学业运势',
							value: 'study'
						}, {
							label: '姻缘运势',
							value: 'love'
						}]
				}
			},
			methods: {
				onQuestionTypeChange(e) {
					this.selectedType = e.detail.value;
				},

					castDivination() {
					// 生成六爻，每爻都有可能变化
					this.hexagramLines = [];
					this.changingLines = [];

					for (let i = 0; i < 6; i++) {
						// 使用传统的三枚铜钱方式模拟
						const coins = Array(3).fill(null).map(() => Math.random() > 0.5 ? 3 : 2);
						const sum = coins.reduce((a, b) => a + b, 0);

						// 6: 老阳(变爻), 7: 少阳, 8: 少阴, 9: 老阴(变爻)
						if (sum === 6 || sum === 9) {
							this.changingLines.push(i);
						}

						this.hexagramLines.push(sum === 7 || sum === 6);
					}

				this.interpretResult();
				this.showResult = true;
			},

				interpretResult() {
					// 将爻线转换为卦象代码
					const hexagramCode = this.hexagramLines
						.map(line => line ? '1' : '0')
						.join('');

					this.currentHexagram = hexagramData[hexagramCode] || {
						name: '未知卦象',
						symbol: '?',
						meaning: '请重试',
						description: '无法解释此卦象',
						details: {
							overall: '暂无解释',
							career: '暂无解释',
							fortune: '暂无解释',
							health: '暂无解释',
							love: '暂无解释'
						}
					};
				},

				getChangingLineInterpretation(line) {
					try {
						const hexagramCode = this.hexagramLines
							.map(line => line ? '1' : '0')
							.join('');
							
						const lineInterpretations = changingLineInterpretations[hexagramCode];
						if (lineInterpretations && lineInterpretations[line] !== undefined) {
							return lineInterpretations[line];
						}
							
						const positions = this.selectedType === 'study' ? [
							'暗示学业远期发展',
							'暗示考试结果',
							'暗示学习助力',
							'暗示个人态度',
							'暗示近期成绩',
							'暗示当前状态'
						] : [
							'暗示感情未来',
							'暗示缘分发展',
							'暗示贵人助力',
							'暗示个人态度',
							'暗示近期桃花',
							'暗示当前状态'
						];
						return positions[line] || '暂无解释';
					} catch (error) {
						console.error('获取变爻解释出错：', error);
						return '解释出错';
					}
				},

				resetDivination() {
					this.showResult = false;
					this.hexagramLines = [];
					this.changingLines = [];
					this.currentHexagram = null;
				}
			}
		}
</script>

<style lang="scss" scoped>
	.fortune-container {
		padding: 20rpx;

		.fortune-content {
			margin-top: 30rpx;

			.intro-text {
				padding: 20rpx;
				color: #666;
				font-size: 28rpx;
				line-height: 1.6;
				background: #f8f8f8;
				border-radius: 10rpx;
			}

			.question-section {
				margin: 40rpx 0;

				.question-input {
					margin-bottom: 30rpx;

					.input-label {
						display: block;
						margin-bottom: 20rpx;
						font-size: 28rpx;
						color: #333;
					}

					.input-field {
						width: 100%;
						height: 80rpx;
						border: 1rpx solid #ddd;
						border-radius: 8rpx;
						padding: 0 20rpx;
						font-size: 28rpx;
						background: #fff;
					}
				}

				.question-type {
					margin-bottom: 30rpx;
					
					.radio-group {
						display: flex;
						justify-content: center;
						margin: 20rpx 0;
						
						.radio-label {
							margin: 0 30rpx;
							font-size: 28rpx;
							display: flex;
							align-items: center;
							
							text {
								margin-left: 10rpx;
							}
						}
					}
				}
			}

			.cast-button {
				&[disabled] {
					background-color: #ccc;
					opacity: 0.6;
				}
			}

			.result-section {
				margin-top: 40rpx;

				.hexagram-info {
					text-align: center;

					.hexagram-name {
						font-size: 36rpx;
						font-weight: bold;
						margin-bottom: 10rpx;
					}

					.hexagram-symbol {
						font-size: 60rpx;
						margin-bottom: 20rpx;
					}

					.hexagram-meaning {
						font-size: 28rpx;
						color: #666;
						margin-bottom: 20rpx;
					}

					.hexagram {
						margin: 30rpx auto;
						width: 200rpx;

						.yao-line {
							height: 20rpx;
							margin: 10rpx 0;
							background-color: #333;
							transition: all 0.3s;

							&.yin {
								width: 45%;
								margin-left: 27.5%;
							}

							&.yang {
								width: 100%;
							}

							&.changing {
								background-color: #ff4444;
							}
						}
					}
				}

				.interpretation {
					margin-top: 40rpx;

					.section {
						margin-bottom: 30rpx;
						background: #f8f8f8;
						padding: 20rpx;
						border-radius: 10rpx;

						.section-title {
							font-size: 30rpx;
							font-weight: bold;
							color: #333;
							margin-bottom: 15rpx;
						}

						.section-content {
							font-size: 28rpx;
							color: #666;
							line-height: 1.8;
							white-space: pre-line;
						}
					}

					.advice {
						margin-top: 20rpx;
						
						.changing-line {
							font-size: 28rpx;
							color: #ff4444;
							margin-top: 10rpx;
							line-height: 1.6;
						}
					}
				}
			}
		}
	}
</style>